<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="../../resource/dhtmlx/calender/codebase/calendar.css">
    <script src="../../resource/dhtmlx/calender/codebase/calendar.js"></script>
</head>
<body>
<section class="dhx_sample-controls">
    <select class="dhx_sample-input" id="date_format">
        <option value="%d.%m.%y">%d.%m.%y</option>
        <option value="%m-%d-%y">%m-%d-%y</option>
        <option value="%d/%m/%y">%d/%m/%y</option>
        <option value="%Y/%m/%d">java程序常用</option>
    </select>
    <button class="dhx_sample-btn dhx_sample-btn--flat" onclick="getDate()">Get Date</button>
    <input class="dhx_sample-input" id="result_input" type="text" readonly>
</section>
<section class="dhx_sample-container">
    <div class="dhx_sample-container__widget" id="calendar"></div>
</section>
<script>
    var calendar = new dhx.Calendar("calendar", {
        value: new Date()
        , css: "dhx_widget--bordered"
        // 这样就是默认设置方式
        , dateFormat: "%Y/%m/%d"
        // 设置日志禁用的api
        , disabledDates: function(date) {
            let disabled = {
                0: true,
                1: true,
                2: false,
                3: false,
                4: false,
                5: false,
                6: true
            }
            return disabled[date.getDay()];
        }
    });
    var formatSelect = document.querySelector("#date_format");
    var resultArea = document.querySelector("#result_input");

    // 获取日期选择框的值
    function getDate() {
        var formatValue = formatSelect.value;
        // 动态设置日期格式
        calendar.config.dateFormat = formatValue;
        resultArea.value = calendar.getValue();
    }
</script>
</body>
</html>